<template>
  <view class="more">
    <!-- 推荐 -->
    <view class="recommend">
      <view class="title">推荐</view>
      <view class="nav">
        <view
          class="nav_box"
          v-for="(item, index) in recommend_box"
          :key="index"
        >
          <img
            :src="item.src"
            @click="onClickHandle(item.style)"
            mode="widthFix"
            alt=""
            class="img"
          />
          <view class="text">{{ item.title }}</view>
        </view>
      </view>
    </view>
    <!-- 潮玩盲盒 -->
    <view class="BlindBox">
      <view class="title">潮玩盲盒</view>
      <view class="nav">
        <view class="nav_box" v-for="(item, index) in Blind_box" :key="index">
          <img
            :src="$IMG_URL + item.src"
            @click="toSearchDetail(item.style)"
            mode="widthFix"
            alt=""
            class="img"
          />
          <view class="text">{{ item.title }}</view>
        </view>
      </view>
    </view>
    <!-- 爱玩直售 -->
    <!-- <view class="directSales">
      <view class="title">爱玩直售</view>
      <view class="nav">
        <view class="nav_box" v-for="(item, index) in sales_box" :key="index">
          <img
            :src="item.src"
            @click="onClickHandle(item.style)"
            mode="widthFix"
            alt=""
            class="img"
          />
          <view class="text">{{ item.title }}</view>
        </view>
      </view>
    </view> -->
  </view>
</template>
<script>
import t4 from '../images/aiwanfuli.png';
import t5 from '../images/chongbang.png';
import t9 from '../images/aiwanmankai.png';
import s1 from '../images/zhigou.png';
import s2 from '../images/yushou.png';
import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(300);
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  data() {
    return {
      recommend_box: [
        {
          src:
            this.$IMG_URL +
            '/uploads/20230609/e580d7ddaf57f129684ee6c350f1bcda.png',
          title: '限时秒杀',
          style: 'none',
        },
        {
          src:
            this.$IMG_URL +
            '/uploads/20230609/562dbed99db04d00952f7d4e30758992.png',
          title: '免费领娃',
          style: 'none',
        },
        {
          src:
            this.$IMG_URL +
            '/uploads/20230609/7acd0acd2d79b4ad0dd0c522222ba094.png',
          title: '礼包中心',
          style: 'libao',
        },
        {
          src: t4,
          title: '爱玩福利',
          style: 'none',
        },
        // {
        //   src: t5,
        //   title: '冲榜领豪礼',
        //   style: 'charts',
        // },
        {
          src:
            this.$IMG_URL +
            '/uploads/20230609/a885a4f6704aaaf3dc268f5e4cc91dad.png',
          title: '拼车夺奖',
          style: 'none',
        },
        // {
        //   src:
        //     this.$IMG_URL +
        //     '/uploads/20230609/28520989a49e82fd39ec989fa76449d5.png',
        //   title: '福袋',
        //   style: 'luckybag',
        // },
        {
          src:
            this.$IMG_URL +
            '/uploads/20230609/47b69ebcfa970308b7f8b680c1624ed2.png',
          title: '一番赏',
          style: 'yfs',
        },
        // {
        //   src: t9,
        //   title: '爱玩满开',
        //   style: 'full_open',
        // },
      ],
      Blind_box: [
        {
          src: '/uploads/20230503/cd6acf2e70a31247bc8a2acd910c095f.png',
          title: 'SP',
          style: 'SP',
        },
        {
          src: '/uploads/20230503/525e6e6866720886115281a2d12c7568.png',
          title: 'DIMOO',
          style: 'DIMOO',
        },
        {
          src: '/uploads/20230503/b9bd30f2093ce1e85cbed9e4aca10d02.png',
          title: 'BOB',
          style: 'BOB',
        },
        {
          src: '/uploads/20230503/2acfae384e749c7f9687905e1f353fe3.png',
          title: '小野',
          style: '小野',
        },
        {
          src: '/uploads/20230503/ee626ced9a31d0a2bb954f8f162643fc.png',
          title: 'DORA',
          style: 'DORA',
        },
        {
          src: '/uploads/20230503/d45b46bcee85fbbf0bd02a898fd5ff7d.png',
          title: 'LABUBU',
          style: 'LABUBU',
        },
        {
          src: '/uploads/20230503/83ade636b5bf5c1337076bcd9027091f.png',
          title: 'Zsiga',
          style: 'Zsiga',
        },
        {
          src: '/uploads/20230503/0abb2b96e406c66d9555be34e0044348.png',
          title: 'HACI',
          style: 'HACI',
        },
      ],
      sales_box: [
        {
          src: s1,
          title: '爱玩直购',
          style: 'directSales',
        },
        {
          src: s2,
          title: '爱玩预售',
          style: 'presale',
        },
      ],
    };
  },
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   */
  //监听页面初始化，其参数同 onLoad 参数 触发时机早于 onLoad 百度小程序
  //onInit() {},
  /** 监听页面加载
   * 其参数为上个页面传递的数据，
   * 参数类型为 Object（用于页面传参）
   */
  onLoad() {},
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {},
  methods: {
    onClickHandle(e) {
      _delay(() => {
        switch (e) {
          case 'luckybag':
            uni.navigateTo({
              url: `pages/index/two_open_components/things-list?type=${e}`,
            });
            break;
          case 'yfs':
            uni.navigateTo({
              url: `pages/index/two_open_components/things-list?type=${e}`,
            });
            break;
          case 'full_open':
            uni.navigateTo({
              url: `pages/index/two_open_components/things-list?type=${e}`,
            });
            break;
          case 'directSales':
            uni.navigateTo({
              url: `pages/directSales_presale/thing_list?type=${e}`,
            });
            break;
          case 'presale':
            uni.navigateTo({
              url: `pages/directSales_presale/thing_list?type=${e}`,
            });
            break;
          case 'libao':
            uni.navigateTo({
              url: 'pages/app/coupon/coupon_center',
            });
            break;
          case 'charts':
            uni.navigateTo({
              url: 'pages/app/charts/index',
            });
            break;
          case 'none':
            //未开放功能提醒正在努力开发中~
            uni.showToast({
              title: '正在努力开发中~',
              duration: 2000,
              icon: 'none',
            });
            break;
        }
      });
    },
    toSearchDetail(e) {
      _delay(() => {
        uni.navigateTo({
          url: `pages/index/two_open_components/searchDetail?type=${e}`,
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.recommend {
  width: calc(100vw-60rpx);
  margin-left: 30rpx;
  margin-right: 30rpx;
  border-radius: 30rpx;
  margin-top: 12rpx;
  background: #f8f8f8;
  box-shadow: 1rpx 4rpx 19rpx 5rpx rgba(207, 207, 207, 0.36);
  box-sizing: border-box;
  .title {
    height: 65rpx;
    font-size: 26rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 700;
    color: #07001a;
    line-height: 68rpx;
    padding-left: 26rpx;
  }
  .nav {
    height: 313rpx;
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .nav_box {
      width: 20%;
      height: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .img {
        width: 100rpx;
        // height: 100rpx;
      }
      .text {
        height: 20rpx;
        font-size: 20rpx;
        font-family: SourceHanSansCN;
        font-weight: 400;
        color: #000000;
        line-height: 22rpx;
        opacity: 0.7;
      }
    }
  }
}
.BlindBox {
  width: calc(100vw-60rpx);
  margin-left: 30rpx;
  margin-right: 30rpx;
  border-radius: 30rpx;
  margin-top: 12rpx;
  background: #f8f8f8;
  box-shadow: 1rpx 4rpx 19rpx 5rpx rgba(207, 207, 207, 0.36);
  box-sizing: border-box;
  .title {
    height: 65rpx;
    font-size: 26rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 700;
    color: #07001a;
    line-height: 68rpx;
    padding-left: 26rpx;
  }
  .nav {
    height: 313rpx;
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .nav_box {
      width: 20%;
      height: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .img {
        width: 100rpx;
        // height: 100rpx;
      }
      .text {
        height: 20rpx;
        font-size: 20rpx;
        font-family: SourceHanSansCN;
        font-weight: 400;
        color: #000000;
        line-height: 22rpx;
        opacity: 0.7;
      }
    }
  }
}
.directSales {
  width: calc(100vw-60rpx);
  margin-left: 30rpx;
  margin-right: 30rpx;
  border-radius: 30rpx;
  margin-top: 12rpx;
  background: #f8f8f8;
  box-shadow: 1rpx 4rpx 19rpx 5rpx rgba(207, 207, 207, 0.36);
  box-sizing: border-box;
  .title {
    height: 65rpx;
    font-size: 26rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 700;
    color: #07001a;
    line-height: 68rpx;
    padding-left: 26rpx;
  }
  .nav {
    height: 156rpx;
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .nav_box {
      width: 20%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .img {
        width: 100rpx;
        // height: 100rpx;
      }
      .text {
        height: 20rpx;
        font-size: 20rpx;
        font-family: SourceHanSansCN;
        font-weight: 400;
        color: #000000;
        line-height: 22rpx;
        opacity: 0.7;
      }
    }
  }
}
</style>
